<template>
  <div class="centerFour">
    <div class="bgBox">
      <div v-for="(item, index) in imgList" :class="[
        'son',
        `son${positionIndex[index]}`,
        `son-move-${positionIndex[index]}-${positionIndex[index + 1] !== undefined
          ? positionIndex[index + 1]
          : positionIndex[0]
        }`
      ]" :key="item.id" @mouseenter="pauseRotation" @mouseleave="resumeRotation" @click="handleClick(item)">
        <img class="pic" :src="item.tp" alt="" v-show="!item.show" />
        <img class="pic" :src="item.tp1" alt="" v-show="item.show" />
        <div :class="[
          'text',
          { 'text-highlighted': positionIndex[index] === 5 && ishigh }
        ]">
          {{ item.name }}
        </div>
      </div>
      <div class="midText">
        <div class="showName">{{ showName }}</div>
        <div class="showValue">{{ showValue }} <span>条</span></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getdevploment } from "@/api/newDashboard/index"
import Cookies from 'js-cookie'
export default {
  name: 'SdssDatagovernanceFrontendCenterFour',

  data() {
    return {
      time: null,
      imgList: [
        {
          id: 1,
          tp: require('@/assets/newDashboard/1a.png'),
          tp1: require('@/assets/newDashboard/1m.png'),
          name: '数据治理',
          value: 8124531,
          show: false,
          url: '处理'
        },
        {
          id: 2,
          tp: require('@/assets/newDashboard/2a.png'),
          tp1: require('@/assets/newDashboard/2m.png'),
          name: '数据汇聚',
          value: 486512,
          show: false,
          url: '集成'
        },
        {
          id: 3,
          tp: require('@/assets/newDashboard/3a.png'),
          tp1: require('@/assets/newDashboard/3m.png'),
          name: '数据质检',
          value: 1512112,
          show: false,
          url: '质量'
        },
        {
          id: 4,
          tp: require('@/assets/newDashboard/4a.png'),
          tp1: require('@/assets/newDashboard/4m.png'),
          name: '数据清洗',
          value: 154358,
          show: false,
          url: ''
        },

        {
          id: 5,
          tp: require('@/assets/newDashboard/5a.png'),
          tp1: require('@/assets/newDashboard/5m.png'),
          name: '数据开发',
          value: 751524,
          show: false,
          url: ''
        }
      ],
      positionIndex: [1, 2, 3, 4, 5],
      showName: '',
      showValue: 0,
      rotationInterval: null,
      ishigh: false
    }
  },

  mounted() {
    this.time = setInterval(() => {
      if (Cookies.get('Admin-Token')) {
        this.updateHighlighted()
        this.startRotation()
        this.fun()
      }
    }, 1000)

  },
  beforeDestroy() {
    clearInterval(this.rotationInterval)
    clearInterval(this.time)
  },
  methods: {
    fun() {
      getdevploment().then(res => {
        if (res.data.code == 0) {
          clearInterval(this.time)
          this.imgList.map((v, i) => {
            if (v.name == '数据开发') {
              v.value = res.data.data.developTotal
            } else if (v.name == '数据质检') {
              v.value = res.data.data.qualityCheckCount
            }
          })
        }
      })
    },
    startRotation() {
      this.rotationInterval = setInterval(this.rotatePositions, 5000)
    },
    rotatePositions() {
      this.ishigh = false
      this.imgList.forEach((item) => {
        item.show = false
      })
      const firstItem = this.positionIndex.shift()
      this.positionIndex.push(firstItem)
      this.updateHighlighted()
    },
    updateHighlighted() {
      setTimeout(() => {
        const highlightIndex = this.positionIndex.indexOf(5)
        this.imgList[highlightIndex].show = true
        const highlightedItem = this.imgList[highlightIndex]
        this.showName = highlightedItem.name
        this.showValue = highlightedItem.value
        this.ishigh = true
      }, 2000)
    },
    pauseRotation() {
      clearInterval(this.rotationInterval)
    },

    resumeRotation() {
      this.startRotation()
    },

    handleClick(item) {
      // 执行所需的点击逻辑
      console.log('Item clicked:', item.id) // 示例：在控制台打印被点击的项的 id
      // 根据需求执行其他操作，比如通过 this.$emit 或者调用其他方法
    }
  }
}
</script>

<style lang="scss" scoped>
.centerFour {
  width: 60%;
  height: 100%;
  background-color: rgba(2, 54, 68, 0.8);
}

.bgBox {
  position: relative;
  margin: 0 auto;
  width: 70%;
  height: 100%;
  background-image: url('~@/assets/newDashboard/bgBox.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.pic {
  width: 5vw;
  height: 8.8vh;
}

.son {
  position: relative;
  cursor: pointer;
}

.son1 {
  position: absolute;
  left: 38%;
  top: 68%;
}

.son2 {
  position: absolute;
  left: -10%;
  top: 42%;
}

.son3 {
  position: absolute;
  left: 10%;
  top: 2%;
}

.son4 {
  position: absolute;
  left: 65%;
  top: 2%;
}

.son5 {
  position: absolute;
  left: 83%;
  top: 42%;
}

.text {
  position: absolute;
  left: 11%;
  top: 92%;
  width: 3.9063vw;
  text-align: center;
  border: 0.0521vw solid #3bbcff;
  border-radius: 0.5208vw;
  color: #fff;
  border-radius: 0.2604vw;
  font-size: 0.7292vw;
  padding: 0.2407vh 0;
}

.text-highlighted {
  background-color: #7ff0fe;
  color: black;
}

.midText {
  position: absolute;
  top: 36%;
  left: 36%;

  .showName {
    width: 5.2083vw;
    text-align: center;
    font-size: 0.8333vw;
    font-family: Source Han Sans CN;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.5625vw;
  }

  .showValue {
    text-align: center;
    font-size: 1.25vw;
    font-family: DINPro;
    font-weight: bold;
    color: #3bf5ff;

    span {
      font-size: 0.9375vw;
    }
  }
}

.son-move-1-2 {
  animation: move-son1-to-son2 2s forwards;
}

@keyframes move-son1-to-son2 {
  from {
    left: 38%;
    top: 68%;
  }

  to {
    left: -10%;
    top: 42%;
  }
}

.son-move-2-3 {
  animation: move-son2-to-son3 2s forwards;
}

@keyframes move-son2-to-son3 {
  from {
    left: -10%;
    top: 42%;
  }

  to {
    left: 10%;
    top: 2%;
  }
}

.son-move-3-4 {
  animation: move-son3-to-son4 2s forwards;
}

@keyframes move-son3-to-son4 {
  from {
    left: 10%;
    top: 2%;
  }

  to {
    left: 65%;
    top: 2%;
  }
}

.son-move-4-5 {
  animation: move-son4-to-son5 2s forwards;
}

@keyframes move-son4-to-son5 {
  from {
    left: 65%;
    top: 2%;
  }

  to {
    left: 83%;
    top: 42%;
  }
}

.son-move-5-1 {
  animation: move-son5-to-son1 2s forwards;
}

@keyframes move-son5-to-son1 {
  from {
    left: 83%;
    top: 42%;
  }

  to {
    left: 38%;
    top: 68%;
  }
}
</style>
